<template>
  <a-layout :class="['layout', device]">
    <global-header
      :mode="layoutMode"
      :menus="menus"
      :theme="navTheme"
      :collapsed="collapsed"
      :device="device"
      @toggle="toggle"
    />
        <a-drawer
          v-if="isMobile()"
          placement="left"
          :wrapClassName="`drawer-sider ${navTheme}`"
          :closable="false"
          :visible="collapsed"
          @close="drawerClose"
        >
          <side-menu
            mode="inline"
            :menus="menus"
            :theme="navTheme"
            :collapsed="false"
            :collapsible="true"
            @menuSelect="menuSelect"
          ></side-menu>
        </a-drawer>

        <side-menu
          v-else-if="isSideMenu()"
          mode="inline"
          :menus="menus"
          :theme="navTheme"
          :collapsed="collapsed"
          :collapsible="true"
        ></side-menu>
        <div :class="[collapsed ?'tabs-mobile':'tabs-pc']">
          <multi-tab></multi-tab>
        </div>
      <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '64px' : '0',marginTop:'134px',marginRight:'24px',marginBottom:'24px',marginLeft:collapsed?'104px':'234px'}">
          <transition name="fade">
            <route-view />
          </transition>
      </a-layout-content>
      <setting-drawer v-if="!production"></setting-drawer>
      <edit-pwd></edit-pwd>
  </a-layout>

</template>

<script>
import { triggerWindowResizeEvent } from '@/utils/util'
import { mapState, mapActions } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin'
import config from '@/config/defaultSettings'
import RouteView from './RouteView'
import editPwd from '@/components/tools/editPwd'
import SideMenu from '@/components/Menu/SideMenu'
import GlobalHeader from '@/components/GlobalHeader'
import GlobalFooter from '@/components/GlobalFooter'
import SettingDrawer from '@/components/SettingDrawer'

export default {
  name: 'BasicLayout',
  mixins: [mixin, mixinDevice],
  components: {
    RouteView,
    SideMenu,
    GlobalHeader,
    GlobalFooter,
    SettingDrawer,
    editPwd
  },
  data () {
    return {
      production: config.production,
      collapsed: false,
      menus: []
    }
  },
  computed: {
    ...mapState({
      mainMenu: state => state.permission.addRouters
    }),
    contentPaddingLeft () {
      if (!this.fixSidebar || this.isMobile()) {
        return '0'
      }
      if (this.sidebarOpened) {
        return '256px'
      }
      return '80px'
    }
  },
  watch: {
    sidebarOpened (val) {
      this.collapsed = !val
    },
  },
  created () {
    this.menus = this.mainMenu.find(item => item.path === '/').children
    this.collapsed = !this.sidebarOpened
  },
  mounted () {
    const userAgent = navigator.userAgent
    if (userAgent.indexOf('Edge') > -1) {
      this.$nextTick(() => {
        this.collapsed = !this.collapsed
        setTimeout(() => {
          this.collapsed = !this.collapsed
        }, 16)
      })
    }
  },
  methods: {
    ...mapActions(['setSidebar']),
    toggle () {
      this.collapsed = !this.collapsed
      this.setSidebar(!this.collapsed)
      triggerWindowResizeEvent()
    },
    paddingCalc () {
      let left = ''
      if (this.sidebarOpened) {
        left = this.isDesktop() ? '256px' : '80px'
      } else {
        left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
      }
      return left
    },
    menuSelect () {
    },
    drawerClose () {
      this.collapsed = false
    }
  }
}
</script>

<style lang="less">
  .fade-enter-active, .fade-leave-active {
    transition-property: opacity margin;
    transition-duration: .5s;
  }
  .fade-enter-active {
    transition-delay: .3s;
    animation: move1 2s;
  }
  .fade-enter, .fade-leave-active {
    opacity: 0;
  }
  @keyframes move1 {  
		 from {  opacity: 0.3; transition: all 1.7s ease; }
		 to {  opacity: 1; transition: all 1.7s ease; }
  }
</style>
